<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="doIt">v-on指令</button>
        <button @click="doIt">v-on简写成@</button>

        <button @dblclick="doIt">双击事件</button>
        <button @mouseenter="doIt">鼠标移入事件</button>

        <!-- Vue中不需要去关心如何更改Dom元素，重点放在如何更改数据上就可以了！！！ -->
        <h3 @click="changeMessage">{{message}}</h3>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var vue = new Vue({
            el:"#app",
            data:{
                message:"ABC"
            },
            methods:{
                doIt:function(){
                    alert("doit")
                },
                changeMessage:function(){
                    this.message+="改变"
                }
            }
        })
    </script>
</body>
</html>